<template>
  <div>
    <van-nav-bar class="ganavbar" title="门店登记" left-arrow @click-left="$router.go(-1)">
      <template #right>
        <div v-if="mode == 'view'" @click="startEdit">编辑</div>
        <div v-else>保存</div>
      </template>
    </van-nav-bar>
    <div class="mainbody" :class="mode">
      <!-- 通用的小标题 -->
      <div class="sub-title-len">门店管理查询基本信息</div>
        <van-field v-model="item.mdbm" colon label="门店编码"
           :readonly="isReadOnly()" :placeholder="getPlaceHolder('门店编码')"/>
        <van-field v-model="item.mdmc" colon label="门店名称"
           :readonly="isReadOnly()" :placeholder="getPlaceHolder('门店名称')"/>
        <van-field v-model="item.mdlx" colon label="门店类型"
           :readonly="isReadOnly()" :placeholder="getPlaceHolder('门店编码')"/>
        <van-field v-model="item.yyzzhm" colon label="营业执照号码"
           :readonly="isReadOnly()" :placeholder="getPlaceHolder('营业执照号码')"/>
        <van-field v-model="item.mddz" colon label="门店店主"
           :readonly="isReadOnly()" :placeholder="getPlaceHolder('门店店主')"/>
        <van-field v-model="item.sfzhm" colon label="身份证号码"
           :readonly="isReadOnly()" :placeholder="getPlaceHolder('身份证号码')"/>
        <van-field v-model="item.lxfs" colon label="联系方式"
           :readonly="isReadOnly()" :placeholder="getPlaceHolder('联系方式')"/>
        <van-field v-model="item.dzxq" colon label="地址详情" class="address-input" readonly :placeholder="getPlaceHolder('地址', 1)"/>
        <van-field v-model="item.jyxm" type="textarea" colon label="经营项目"
           :readonly="isReadOnly()" :placeholder="getPlaceHolder('经营项目')"/>
           
        <van-field colon label="房屋权属">
           <template #input>
            <van-radio-group v-if="!isReadOnly()" direction="horizontal" v-model="item.fwqs" name="" id="">
              <van-radio icon-size="16px" name="自有">自有</van-radio>
              <van-radio icon-size="16px" name="租赁">租赁</van-radio>
            </van-radio-group>
            <span v-else>{{item.fwqs}}</span>
          </template>
        </van-field>

        <van-field v-model="item.fdxm" colon label="房东姓名" v-show="item.fwqs == '租赁'"
           :readonly="isReadOnly()" :placeholder="getPlaceHolder('房东姓名')"/>
        <van-field v-model="item.fddh" colon label="房东电话" v-show="item.fwqs == '租赁'"
           :readonly="isReadOnly()" :placeholder="getPlaceHolder('房东电话')"/>

      <div class="sub-title-len">市容责任单位信息</div>
        <van-field v-model="item.sswg" colon label="所属网格"
           :readonly="isReadOnly()" :placeholder="getPlaceHolder('所属网格')"/>
        <van-field v-model="item.ssld" colon label="所属路段"
           :readonly="isReadOnly()" :placeholder="getPlaceHolder('所属路段')"/>
        <van-field v-model="item.jgdw" colon label="监管单位"
           :readonly="isReadOnly()" :placeholder="getPlaceHolder('监管单位')"/>
        <van-field v-model="item.zzrwy" colon label="责任人/物业"
           :readonly="isReadOnly()" :placeholder="getPlaceHolder('责任人/物业')"/>
        <van-field v-model="item.zzrlxfs" colon label="联系方式"
           :readonly="isReadOnly()" :placeholder="getPlaceHolder('联系方式')"/>

      <div class="sub-title-len">附件</div>
        <van-field v-model="item.srhwzrs" colon label="市容环卫责任书" class="file-input">
          <template #input>
            <van-uploader v-model="fileList.srhwzrs" :readonly="isReadOnly()" :deletable="!isReadOnly()" max-count="1"/>
          </template>
        </van-field>
        <van-field v-model="item.yyzz" colon label="营业执照" class="file-input">
          <template #input>
            <van-uploader v-model="fileList.yyzz" :readonly="isReadOnly()" :deletable="!isReadOnly()" max-count="1"/>
          </template>
        </van-field>
        <van-field v-model="item.pwxkz" colon label="排污许可证" class="file-input">
          <template #input>
            <van-uploader v-model="fileList.pwxkz" :readonly="isReadOnly()" :deletable="!isReadOnly()" max-count="1"/>
          </template>
        </van-field>
        <van-field v-model="item.mdzmzp" colon label="门店正面照片" class="file-input">
          <template #input>
            <van-uploader v-model="fileList.mdzmzp" :readonly="isReadOnly()" :deletable="!isReadOnly()" max-count="1"/>
          </template>
        </van-field>
    </div>
  </div>
</template>
<script>
import ViewAndEdit from '@/mixins/ViewAndEdit';
export default {
  name: "MD_DETAIL",
  components: {
  },
  mixins: [ViewAndEdit],
  data () {
    return {
      item: '',
      fileList: {
        srhwzrs: [],
        yyzz: [],
        pwxkz: [],
        mdzmzp: []
      }
    };
  },
  methods: {
    getItemDetail (id) {
      var vm = this;
      vm.$getAndLoad('获取门店详情', 'getDetail.jsp?id=' + id, function (data) {
        data.mdbm = '';
        data.mdmc = '艾红梅';
        data.mdlx = '个体工商户';
        data.yyzzhm = '92320321MA23CQD02N';
        data.mddz = '艾红梅';
        data.sfzhm = '';
        data.lxfs = '-';
        data.dzxq = '邳州市岔河镇岔河村';
        data.jyxm = '一般项目：鞋帽零售（除依法须经批准的项目外，凭营业执照依法自主开展经营活动）';
        data.fwqs = '自有';
        data.fdxm = '';
        data.fddh = '';

        data.sswg = '';
        data.ssld = '';
        data.jgdw = '';
        data.zzrwy = '';
        data.zzrlxfs = '';

        data.srhwzrs = '';
        data.yyzz = '';
        data.pwxkz = '';
        data.mdzmzp = '';

        vm.item = data;
      });
    }
  },
  mounted: function () {
    if (this.mode == 'view') {
      this.getItemDetail(this.$route.params.item.id);
    } else if (this.mode == 'add') {
      this.item = {
        mdbm: '',
        mdmc: '',
        mdlx: '',
        yyzzhm: '',
        mddz: '',
        sfzhm: '',
        lxfs: '',
        dzxq: '',
        jyxm: '',
        fwqs: '自有',
        fdxm: '',
        fddh: '',

        sswg: '',
        ssld: '',
        jgdw: '',
        zzrwy: '',
        zzrlxfs: '',

        srhwzrs: '',
        yyzz: '',
        pwxkz: '',
        mdzmzp: ''
      };
    }
  }
};
</script>

<style lang="scss" scoped>

</style>
